iT邦幫忙

DAY 23
1

30 天學會 Web 前端效能優化系列 第 23

[30 天學會 Web 前端效能優化] 23. 透過專案複習前面的知識2 - 監測 jank

  • 分享至 

  • xImage
  •  

前面講到 Paint 時有提到 jank ,說了很多理論,沒有看到還是很難感受一下是什麼感覺。請大家再次訪問我們的測試專案

接著請點擊「啟動瘋狂模式」的按鈕,並且上下滑動看看,你就可以感受什麼叫做 jank 了,那種卡卡的感覺很討厭吧?

讓我們看一下到底開發者寫了什麼鬼東西:

<script>
  function jank(){
    var x = Math.floor((Math.random() * 500) + 50);
    var left_float  = $(".left").css("float");
    var right_float = $(".right").css("float");
    $(".left").css("float",right_float);
    $(".left").css("width",x);
    $(".right").css("float",left_float);
    $(".right").css("width",x);
  }

  $(document).ready(function(){
    $("#start").click(function(){
      setInterval("jank()", 250);
    });
  });  
</script>

<button id="start">啟動瘋狂模式</button>

<div class="hellobox">
<div class="left"></div>
<div class="right"></div>
</div>

<div class="hellobox">
<div class="left"></div>
<div class="right"></div>
</div>

當我們點擊「啟動瘋狂模式」後,瀏覽器每 250ms 就會交換 class=left 以及 class=right(一黑ㄧ橘)的 div 的位置,也取亂數改變它們的寬度。

讓我們打開 Chrome 的 Dev tool 來看看有多麼的可怕(小插播一下:移動中間兩個小灰點,可以看到更多 Frame Data):

之前我們說過如果要達到 60FPS ,產生一個 Frame 最多只能花費 16ms ,然而觀測一下發現這裡每產生一個 Frame 至少都花費了 100~200ms !!實在太可怕了!

到底沒有達到 60FPS 會發生什麼事情,各位透過這一個測試專案應該可以很實體地感受到了吧?當然一般網站不會寫這種奇怪、惡搞的東西,但是還是有很多時候會做出瀏覽體驗不是非常流暢的功能,因此各位除了調校 Page Load Time 之外(調整 critical rendering path),也應該要留意 Runtime 的 Performance 。初次 Render 網站的速度太慢,使用者會跑光光,但是使用時體驗很糟,也會讓很多使用者離開,因此兩方面的 Performance Issue 都應該要注意。


上一篇
[30 天學會 Web 前端效能優化] 22. 透過專案複習前面的知識1 - doc.write 的可怕
下一篇
[30 天學會 Web 前端效能優化] 24. 透過專案複習前面的知識3 - 合併 JS
系列文
30 天學會 Web 前端效能優化30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言